<template>
  <div>
    <!-- 添加职位信息 -->
    <div class="add-pos-box">
      <el-input size="small" ref="posInput" class="add-pos-input"
                v-model="newPos.name" placeholder="输入添加职位信息" @keydown.enter="addPos"></el-input>
      <el-button icon="el-icon-plus" size="mini" type="primary" @click="addPos">
        添加
      </el-button>
    </div>
    <div class="pos-table-box">
      <!-- 批量删除 -->
      <el-button type="danger" icon="el-icon-delete" size="small"
                 :disabled="this.multipleSelection.length === 0"
                 @click="multipleDelete"
      >批量删除
      </el-button>
      <!-- 职位信息表格 -->
      <el-table :data="positionData" style="width: 100%" v-loading="loading" @selection-change="handleSelection">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="ID" width="80">
          <template #default="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="180">
          <template #default="scope">
            <el-icon>
              <timer/>
            </el-icon>
            <span style="margin-left: 10px">{{ scope.row.createDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.enabled?'':'danger'">{{ scope.row.enabled ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button size="mini" @click="editPos(scope.$index, scope.row)"
            >编辑
            </el-button
            >
            <el-button
                size="mini"
                type="danger"
                @click="deletePos(scope.$index, scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹出编辑框 -->
      <el-dialog v-model="dialogVisible" title="更新职位信息">
        <div style="display: flex">
          <el-tag style="margin-right: 15px">名称</el-tag>
          <el-input v-model="updatePos.name" size="small" clearable></el-input>
        </div>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmUpdate"
        >确定</el-button
        >
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {Timer} from '@element-plus/icons';
import {deleteRequest, getRequest, postRequest, putRequest} from "@/utils/api";
import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  name: "PosManage",
  components: {
    Timer,
  },
  created() {
    this.initPos();
  },

  data() {
    return {
      loading: false,
      dialogVisible: false,
      newPos: {
        name: ''
      },
      updatePos: {
        id: '',
        name: ''
      },
      positionData: [],
      multipleSelection: []
    }
  },
  methods: {
    addPos() {
      if (this.newPos.name.trim() !== '') {
        postRequest('/system/basic/pos/', this.newPos).then(res => {
          this.newPos.name = '';
          this.initPos();
        })
      } else {
        ElMessage.error('添加信息不能为空');
        this.$refs["posInput"].focus();
      }
    },
    editPos(index, row) {
      this.dialogVisible = true;
      this.updatePos.id = row.id;
      this.updatePos.name = row.name;
    },
    confirmUpdate() {
      if (this.updatePos.name.trim() !== '') {
        putRequest('/system/basic/pos/', this.updatePos).then(res => {
          this.updatePos.id = '';
          this.updatePos.name = '';
          this.dialogVisible = false;
          this.initPos();
        })
      } else {
        ElMessage.error('更新职位名称不能为空');
      }
    },
    deletePos(index, row) {
      ElMessageBox.confirm(
          '此操作将永久删除本条记录，是否继续？',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            deleteRequest('/system/basic/pos/' + row.id).then(res => {
              this.initPos();
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消操作',
            })
            this.initPos();
          })

    },
    // 初始化职位表格数据
    initPos() {
      this.loading = true
      getRequest('/system/basic/pos/').then(res => {
        if (res) {
          this.positionData = res;
          this.loading = false;
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    handleSelection(val) {
      this.multipleSelection = val;
    },
    multipleDelete() {
      ElMessageBox.confirm(
          `此操作将永久删除${this.multipleSelection.length}条记录，是否继续？`,
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            let ids = '?';
            if (this.multipleSelection.length) {
              this.multipleSelection.forEach(item => {
                ids += 'ids=' + item.id + '&';
              })
              deleteRequest('/system/basic/pos/' + ids).then(res => {
                this.initPos();
              })
            }
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消操作',
            })
            this.initPos();
          })

    }
  }
}
</script>

<style scoped>
.add-pos-box {
  margin-top: 15px;
  width: 50%;
  display: flex;
  justify-content: start;
  align-items: center;
}

.add-pos-box .add-pos-input {
  margin-right: 25px;
}

.pos-table-box {
  margin-top: 40px;
}
</style>
